<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <title>MyPetStore</title>
  <link rel="StyleSheet" href="css/mypetstore.css" type="text/css" media="screen"/>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
  <script src="js/productInfo.js"></script>
  <script src="js/productAuto.js"></script>
  <script src="js/cartUpdateAuto.js"></script>
  <script src="js/module.js"></script>
</head>

<body>
<div id="Header">
  <div id="Logo">
    <div id="LogoContent">
      <a href="/mainForm"><img src="img/logo-topbar.gif"> </a>
    </div>
  </div>

  <div id="Menu">
    <div id="MenuContest">
      <a href="/cartForm"><img src="img/cart.gif" align="middle" name="img_cart"></a>
      <img src="img/separator.gif" align="middle">

      <a href="/loginForm" th:if="${session.loginAccount == null}">Sign Up</a>
      <img src="img/separator.gif" align="middle" th:if="${session.loginAccount == null}">

      <a href="orderForm" th:if="${session.loginAccount != null}">My Orders</a>
      <img src="img/separator.gif" align="middle" th:if="${session.loginAccount != null}">

      <a href="signOut" th:if="${session.loginAccount != null}">Sign Out</a>
      <img src="img/separator.gif" align="middle" th:if="${session.loginAccount != null}">
      <a href="myAccount" th:if="${session.loginAccount != null}">My Account</a>
      <img src="img/separator.gif" align="middle" th:if="${session.loginAccount != null}">

      <a href="html/help.html">?</a>
    </div>


  </div>

  <div id="Search">
    <div id="SearchContent">
      <form action="search" method="post">
        <input type="search" name="keyword" size="14" id="keyword">
        <input type="submit" value="Search">
      </form>
    </div>
    <div id="productAutoComplete">
      <ul id="productAutoList">
        <li class="productAutoItem">Amazon Parrot</li>
        <li class="productAutoItem">Amazon Parrot</li>
        <li class="productAutoItem">Amazon Parrot</li>
        <li class="productAutoItem">Amazon Parrot</li>
        <li class="productAutoItem">Amazon Parrot</li>
        <li class="productAutoItem" data-productId="aa">Amazon Parrot</li>
      </ul>
    </div>
  </div>

  <div id="QuickLinks">
    <a href="categoryForm?categoryId=FISH"><img src="img/sm_fish.gif"></a>
    <img src="img/separator.gif">
    <a href="categoryForm?categoryId=DOGS"><img src="img/sm_dogs.gif"></a>
    <img src="img/separator.gif">
    <a href="categoryForm?categoryId=CATS"><img src="img/sm_cats.gif"></a>
    <img src="img/separator.gif">
    <a href="categoryForm?categoryId=REPTILES"><img src="img/sm_reptiles.gif"></a>
    <img src="img/separator.gif">
    <a href="categoryForm?categoryId=BIRDS"><img src="img/sm_birds.gif"></a>
  </div>

</div>
</body>
</html>

